首页我们先来解释一下下JQuerymobile是什么，jQuery Mobile是JQuery 框架的一个组件（而非jquery的移动版本）。jQuery Mobile是一款基于HTML5的用户界面系统 是用于创建移动 Web 应用的前端开发框架，可以应用于智能手机与平板电脑，而且使用 HTML5 和 CSS3 最小的脚本来布局网页。

我们先一部分一部分讲解，最后在为大家附上完整代码。

我们再来解释一下其中一些属性的作用吧。

data-role="panel"属性用来创建面板。 data-display 属性来控制面板的展示方式:    ① overlay在内容上显示面板    ② push是同时"推动"面板和页面。    ③ reveal默认值，将页面像幻灯片一样从屏幕划出，将面板显示出来。

   data-position="right"让面板出现在屏幕的右侧    data-inset="true"：列表样式的圆角和边缘。    元素的 data-autodividers="true" 属性设置可以根据字母顺序排列的列表。    data-role="